<template>
  <div class="box">
      <img src="../assets/dog.jpg" alt="" class="img">
      <p :style="{backgroundColor: colorStr}" @click="btn">这是一只孤独可怜的狗狗</p>
  </div>
</template>

<script>
export default {
    data () {
        return {
           colorStr:'' 
        }
    },
    methods: {
        btn(){
            this.colorStr = `rgb(${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)})`
        }
    }
}
</script>

<style>
   .box {
       width: 300px;
       float: left;
       border: 1px solid #000;
       text-align: center;
       
   }
   .img {
       width: 100%;

   }
</style>